<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout_basic</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body id="cc">

    <div data-options="region:'north'" style="height:20%"></div>
    <div data-options="region:'south',split:true" style="height:20%;"></div>
    <!--<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>-->
    <div data-options="region:'west',split:true" title="West" style="width:100px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="系统设置1" data-options="selected:true">
                <ul id="tt"></ul>
            </div>
            <div title="系统设置2" data-options="selected:true"></div>
            <div title="系统设置3" data-options="selected:true"></div>
            <div title="系统设置4" data-options="selected:true"></div>
        </div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
       <div id="tab">
           <div title="datagrid">
                 <table id="tb">
                 <thead>
                     <tr>
                     <th data-options="field:'itemid'" width="80">Item ID</th>
                     <th data-options="field:'productid'" width="100">Product ID</th>
                     <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                     <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                     <th data-options="field:'attr1'" width="150">Attribute</th>
                         <th data-options="field:'status',align:'center'" width="60">Status</th>
                      </tr>
                       </thead>
                 </table>
           </div>
           <div title="tab2" style="height: auto">
               <div class="easyui-panel" title="New Topic" style="width:400px">
                   <div style="padding:10px 60px 20px 60px">
                       <form id="ff" method="post">
                           <table cellpadding="5">
                               <tr>
                                   <td>Name:</td>
                                   <td><input class="easyui-textbox" type="text" name="name" data-options="required:true" style="width: 150px"/></td>
                               </tr>
                               <tr>
                                   <td>Email:</td>
                                   <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'" style="width: 150px"></input></td>
                               </tr>
                               <tr>
                                   <td>Subject:</td>
                                   <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true" style="width: 150px"></input></td>
                               </tr>
                               <tr>
                                   <td>Message:</td>
                                   <td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px" style="width: 150px"></input></td>
                               </tr>
                               <tr>
                                   <td>Language:</td>
                                   <td>
                                       <select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
                                   </td>
                               </tr>
                           </table>
                       </form>
                       <div style="text-align:center;padding:5px">
                           <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
                           <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
                       </div>
                   </div>
               </div>
           </div>

       </div>
    </div>

<script type="text/javascript">
    var datagrid1 = {"total":28,"rows":[
        {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
        {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
        {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
        {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
        {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
        {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
        {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
        {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
        {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
        {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
    ],"footer":[
        {"unitcost":19.80,"listprice":60.40,"productid":"Avere:"},
        {"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
    ]};

    $("#cc").layout({
        width:"100%",
        height:"100%"
    });
    $("#tb").datagrid({
        data:datagrid1,
        border:false,
        singleSelect:true,
        fit:true,
        fitColumns:true
    });
    var tree1 = [{
        "id":1,
        "text":"My Documents",
        "children":[{
            "id":11,
            "text":"Photos",
            "state":"closed",
            "children":[{
                "id":111,
                "text":"Friend"
            },{
                "id":112,
                "text":"Wife"
            },{
                "id":113,
                "text":"Company"
            }]
        },{
            "id":12,
            "text":"Program Files",
            "state":"closed",
            "children":[{
                "id":121,
                "text":"Intel"
            },{
                "id":122,
                "text":"Java",
                "attributes":{
                    "p1":"Custom Attribute1",
                    "p2":"Custom Attribute2"
                }
            },{
                "id":123,
                "text":"Microsoft Office"
            },{
                "id":124,
                "text":"Games",
                "checked":true
            }]
        },{
            "id":13,
            "text":"index.html"
        },{
            "id":14,
            "text":"about.html"
        },{
            "id":15,
            "text":"welcome.html"
        }]
    }];
    $("#tt").tree({
        animate:true,
        lines:true,
        iconCls:'icon-group',
        data:tree1
    });
    $("#tab").tabs({
        border:true,
        height:250,
        tabWidth:112,
        pill:true
    });
//    $('#tab').tabs('add',{
//        title:'tab1',
//        padding:10,
//        content:"nihao  niaho ",
//        closable:true,
//
//        tools:[{
//            iconCls:'icon-mini-refresh',
//            handler:function(){
//                alert('refresh');
//            }
//        }]
//    });
    $("#ff").form({});
    function submitForm(){
        $('#ff').form('submit');
    }
    function clearForm(){
        $('#ff').form('clear');
    }
</script>
</body>
</html>